<!doctype html>
<html>
<head>
    <include file="public/head"/>
    <title>多图统计</title>
    <meta name="description" content="多图统计">
    <meta name="keywords" content="多图统计">

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a>多图合并</a></li>
    </ul>
    <form method="post" class="js-ajax-form margin-top-20" action="#">
        <div class="table_list">
            <volist name="graphical" id="vo" key="k">
                <?php if(count($graphical)==1):?>
                <div id="main{$vo.id}" style="width: 90%;height:600px;"></div>
                <?php else:?>
                <div id="main{$vo.id}" style="width: 50%;height:400px; float: left"></div>
                <?php endif;?>
            </volist>
        </div>
    </form>
</div>

<input type="hidden" value='<?php echo json_encode($data);?>' id="data"/>
<include file="public/scripts"/>
<script>
    var data = $('#data').val();
    data = JSON.parse(data);

    data_graphical = JSON.parse('<?php echo json_encode($graphical)?>');
   for (var k in data_graphical){
      var data_list = Reset(data[data_graphical[k].id])
       check(data_graphical[k].shape,data_list.data_name,data_list.data_val,'main'+data_graphical[k].id,data_graphical[k].title,data_graphical[k].category_name);
   }

    function check(shape,data_name,data_val,id,title,cate_name) {
        if(shape==1){
            echarts.init(document.getElementById(id)).setOption({
                title: {
                    text:title
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data_name
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: cate_name,
                        type: 'line',
                        // stack: '总量',
                        data: data_val
                    },
                ]
            });
        }else if(shape==2){
            echarts.init(document.getElementById(id)).setOption({
                title: {
                    text: title
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {
                    data:['']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : data_name
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:cate_name,
                        type:'bar',
                        data:data_val
                    }
                ]
            })
        }else if(shape==3){
            var selected = {};
            var seriesData = [];
            for (var i in data_name){
                selected[data_name[i]]=i < data_name.length;
                seriesData.push({
                    name: data_name[i],
                    value: data_val[i]
                });
            }
            echarts.init(document.getElementById(id)).setOption({
                title: {
                    text: title,
                    x:'center'
                },

                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: data_name,
                    selected: selected
                },
                series : [
                    {
                        name: cate_name,
                        type: 'pie',
                        radius : '75%',
                        center: ['40%', '50%'],
                        data: seriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }
    }
    
    function Reset(data) {
       console.log(data)
        var data_name = [];
        var data_val = [];
        for (var p in data){
            data_name.push(data[p].name)
            data_val.push(data[p].count_t);
        }

        return  {
            data_name: data_name,
            data_val: data_val
        };


    }

</script>
</body>
</html>